<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区管理系统 - 社区安防</title>
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- 引入 Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- 引入 flatpickr 日期时间选择器 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Noto Sans SC', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f5f7fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 0;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 100;
        }
        
        .header h1 {
            font-weight: 500;
            margin: 0;
            font-size: 1.8rem;
        }
        
        /* 导航栏样式 */
        .nav {
            background-color: white;
            padding: 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        
        .nav ul li {
            position: relative;
        }
        
        .nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            padding: 15px 25px;
            display: block;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .nav ul li a:hover,
        .nav ul li a.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .nav ul li a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* 主内容区样式 */
        .main-content {
            display: flex;
            margin-top: 20px;
        }
        
        .sidebar {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 15px;
            margin-right: 20px;
            height: fit-content;
        }
        
        .sidebar h3 {
            color: var(--dark-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu li {
            margin-bottom: 5px;
        }
        
        .sidebar-menu a {
            display: block;
            padding: 10px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .sidebar-menu i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .content {
            flex: 1;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .card-header h2 {
            color: var(--dark-color);
            font-size: 1.4rem;
            margin: 0;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 1em;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #e67e22;
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-color);
        }
        
        .btn-sm {
            padding: 5px 10px;
            font-size: 0.875rem;
        }
        
        .btn-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-icon i {
            margin-right: 5px;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .table th,
        .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            background-color: var(--light-color);
            color: var(--dark-color);
            font-weight: 500;
        }
        
        .table tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .table .actions {
            white-space: nowrap;
        }
        
        /* 状态标签 */
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .badge-primary {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .badge-success {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }
        
        .badge-warning {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }
        
        .badge-danger {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--danger-color);
        }
        
        /* 仪表盘统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            display: flex;
            align-items: center;
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-icon.primary {
            background-color: var(--primary-color);
        }
        
        .stat-icon.success {
            background-color: var(--success-color);
        }
        
        .stat-icon.warning {
            background-color: var(--warning-color);
        }
        
        .stat-icon.danger {
            background-color: var(--danger-color);
        }
        
        .stat-info h3 {
            font-size: 1.8rem;
            margin: 0;
            color: var(--dark-color);
        }
        
        .stat-info p {
            margin: 5px 0 0;
            color: #777;
        }
        
        /* 移动端模拟 */
        .mobile-preview {
            width: 320px;
            border: 12px solid #222;
            border-radius: 30px;
            padding: 15px;
            background-color: #f5f5f5;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            margin: 0 auto;
        }
        
        .mobile-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            border-radius: 10px 10px 0 0;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .mobile-nav {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            background-color: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .mobile-nav-item {
            text-align: center;
            color: #777;
            font-size: 0.8rem;
        }
        
        .mobile-nav-item.active {
            color: var(--primary-color);
        }
        
        .mobile-nav-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .nav ul {
                flex-wrap: wrap;
            }
            
            .nav ul li {
                margin-bottom: 5px;
            }
        }
        
        @media (max-width: 768px) {
            .stats-container {
            grid-template-columns: 1fr 1fr;
            }
            
            .mobile-preview {
                width: 280px;
            }
        }
        
        @media (max-width: 576px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .nav ul li a {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 选项卡样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
        }
        
        .tab:hover {
            color: var(--primary-color);
        }
        
        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 新增模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            width: 80%;
            max-width: 600px;
            animation: fadeIn 0.3s;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-header h3 {
            margin: 0;
            color: var(--dark-color);
        }
        
        .close-modal {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close-modal:hover {
            color: var(--dark-color);
        }
        
        /* 筛选表单样式 */
        .filter-form {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }
        
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        .filter-col {
            flex: 1;
            min-width: 200px;
            padding: 0 10px;
            margin-bottom: 15px;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }
        
        /* 详情卡片样式 */
        .detail-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 10px;
        }
        
        .detail-label {
            width: 120px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .detail-value {
            flex: 1;
        }
        
        /* 处理历史样式 */
        .history-item {
            padding: 15px;
            border-left: 3px solid var(--primary-color);
            margin-bottom: 15px;
            background-color: white;
            border-radius: 0 4px 4px 0;
            box-shadow: var(--shadow);
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .history-time {
            color: #777;
            font-size: 0.9rem;
        }
        
        .history-content {
            color: var(--text-color);
        }
        
        /* Select2 样式调整 */
        .select2-container {
            width: 100% !important;
        }
        
        .select2-container--default .select2-selection--multiple {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            min-height: 38px;
        }
        
        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .modal-content {
                width: 90%;
                margin: 10% auto;
            }
            
            .filter-col {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-building"></i> 智慧社区管理系统</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="shoye.html"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="resident.html"><i class="fas fa-users"></i> 住户管理</a></li>
            <li><a href="property.html"><i class="fas fa-home"></i> 房产管理</a></li>
            <li><a href="repair.html"><i class="fas fa-tools"></i> 报修维护</a></li>
            <li><a href="fee.html"><i class="fas fa-money-bill-wave"></i> 费用管理</a></li>
            <li><a href="security.html" class="active"><i class="fas fa-shield-alt"></i> 社区安防</a></li>
            <li><a href="index.html"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
        </ul>
    </div>
    <div class="container">
        <div id="security" class="section">
            <div class="main-content">
                <div class="sidebar">
                    <h3><i class="fas fa-shield-alt"></i> 社区安防</h3>
                    <ul class="sidebar-menu">
                        <li><a href="#security-list" class="active"><i class="fas fa-list"></i> 安防记录</a></li>
                        <li><a href="#security-alert"><i class="fas fa-exclamation-triangle"></i> 告警管理</a></li>
                        <li><a href="#security-analysis"><i class="fas fa-chart-bar"></i> 统计分析</a></li>
                    </ul>
                </div>
                
                <div class="content">
                    <!-- 安防记录 -->
                    <div id="security-list" class="card animate-fade">
                        <div class="card-header">
                            <h2><i class="fas fa-list"></i> 安防记录</h2>
                            <div>
                                <button id="add-record-btn" class="btn btn-primary btn-icon"><i class="fas fa-plus"></i> 添加记录</button>
                                <button id="filter-records-btn" class="btn btn-outline btn-icon"><i class="fas fa-filter"></i> 筛选</button>
                            </div>
                        </div>
                        
                        <!-- 高级筛选表单 -->
                        <div id="filter-form" class="filter-form" style="display: none;">
                            <div class="filter-row">
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>记录类型</label>
                                        <select id="filter-type" class="form-control" multiple>
                                            <option value="access">门禁记录</option>
                                            <option value="camera">监控记录</option>
                                            <option value="patrol">巡逻记录</option>
                                            <option value="fire">消防检查</option>
                                            <option value="equipment">设备维护</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>记录状态</label>
                                        <select id="filter-status" class="form-control" multiple>
                                            <option value="normal">正常</option>
                                            <option value="suspicious">可疑</option>
                                            <option value="alert">警报</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>位置区域</label>
                                        <select id="filter-location" class="form-control" multiple>
                                            <option value="east">东门</option>
                                            <option value="west">西门</option>
                                            <option value="north">北门</option>
                                            <option value="south">南门</option>
                                            <option value="parking">停车场</option>
                                            <option value="garden">社区花园</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>时间范围</label>
                                        <input type="text" id="filter-date-range" class="form-control" placeholder="选择时间范围">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-actions">
                                <button id="reset-filter-btn" class="btn btn-outline">重置</button>
                                <button id="apply-filter-btn" class="btn btn-primary">应用筛选</button>
                            </div>
                        </div>
                        
                        <div class="tabs">
                            <div class="tab active" data-tab="all">全部记录</div>
                            <div class="tab" data-tab="access">门禁记录</div>
                            <div class="tab" data-tab="camera">监控记录</div>
                            <div class="tab" data-tab="patrol">巡逻记录</div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table" id="security-records-table">
                                <thead>
                                    <tr>
                                        <th>记录ID</th>
                                        <th>类型</th>
                                        <th>位置</th>
                                        <th>时间</th>
                                        <th>相关人员</th>
                                        <th>状态</th>
                                        <th class="actions">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="pagination" style="text-align: center;">
                            <button id="prev-page" class="btn btn-outline"><i class="fas fa-angle-left"></i> 上一页</button>
                            <button class="btn btn-outline active">1</button>
                            <button class="btn btn-outline">2</button>
                            <button class="btn btn-outline">3</button>
                            <button id="next-page" class="btn btn-outline"><i class="fas fa-angle-right"></i> 下一页</button>
                        </div>
                    </div>
                    
                    <!-- 告警管理 -->
                    <div id="security-alert" class="card animate-fade" style="display: none;">
                        <div class="card-header">
                            <h2><i class="fas fa-exclamation-triangle"></i> 告警管理</h2>
                            <div>
                                <button id="mute-all-btn" class="btn btn-primary btn-icon"><i class="fas fa-bell-slash"></i> 静音所有</button>
                                <button id="alert-settings-btn" class="btn btn-outline btn-icon"><i class="fas fa-cog"></i> 设置</button>
                            </div>
                        </div>
                        
                        <div class="stats-container" id="alert-stats">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </div>
                        
                        <div class="tabs">
                            <div class="tab active" data-alert-tab="pending">未处理</div>
                            <div class="tab" data-alert-tab="processing">处理中</div>
                            <div class="tab" data-alert-tab="resolved">已解决</div>
                            <div class="tab" data-alert-tab="all">全部</div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table" id="alerts-table">
                                <thead>
                                    <tr>
                                        <th>告警ID</th>
                                        <th>类型</th>
                                        <th>位置</th>
                                        <th>时间</th>
                                        <th>级别</th>
                                        <th>状态</th>
                                        <th class="actions">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="detail-card" id="alert-details" style="display: none;">
                            <h3>告警详情</h3>
                            <div class="detail-row">
                                <div class="detail-label">告警ID:</div>
                                <div class="detail-value" id="alert-id"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">类型:</div>
                                <div class="detail-value" id="alert-type"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">位置:</div>
                                <div class="detail-value" id="alert-location"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">时间:</div>
                                <div class="detail-value" id="alert-time"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">级别:</div>
                                <div class="detail-value" id="alert-level"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">状态:</div>
                                <div class="detail-value" id="alert-status"></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">描述:</div>
                                <div class="detail-value" id="alert-description"></div>
                            </div>
                            
                            <h4 style="margin-top: 20px;">处理历史</h4>
                            <div id="alert-history">
                                <!-- 处理历史将通过JavaScript动态加载 -->
                            </div>
                            
                            <div class="form-group" style="margin-top: 20px;">
                                <label>处理记录</label>
                                <textarea id="alert-process-note" class="form-control" placeholder="请输入处理过程和结果..."></textarea>
                                
                                <div style="text-align: right; margin-top: 15px;">
                                    <button id="resolve-alert-btn" class="btn btn-success">标记为已解决</button>
                                    <button id="save-process-btn" class="btn btn-primary">保存处理记录</button>
                                    <button id="cancel-process-btn" class="btn btn-outline">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 统计分析 -->
                    <div id="security-analysis" class="card animate-fade" style="display: none;">
                        <div class="card-header">
                            <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
                            <div>
                                <select id="time-range-select" class="form-control" style="width: auto; display: inline-block;">
                                    <option value="7">最近7天</option>
                                    <option value="30">最近30天</option>
                                    <option value="90">最近90天</option>
                                    <option value="custom">自定义时间</option>
                                </select>
                                <button id="export-data-btn" class="btn btn-outline btn-icon"><i class="fas fa-download"></i> 导出</button>
                            </div>
                        </div>
                        
                        <!-- 自定义时间范围选择 -->
                        <div id="custom-date-range" class="filter-form" style="display: none; margin-bottom: 20px;">
                            <div class="filter-row">
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>开始时间</label>
                                        <input type="text" id="start-date" class="form-control" placeholder="选择开始时间">
                                    </div>
                                </div>
                                <div class="filter-col">
                                    <div class="form-group">
                                        <label>结束时间</label>
                                        <input type="text" id="end-date" class="form-control" placeholder="选择结束时间">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-actions">
                                <button id="cancel-custom-date" class="btn btn-outline">取消</button>
                                <button id="apply-custom-date" class="btn btn-primary">应用</button>
                            </div>
                        </div>
                        
                        <div class="stats-container" id="analysis-stats">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </div>
                        
                        <div style="display: flex; margin-bottom: 20px;">
                            <div style="flex: 1; margin-right: 10px;">
                                <div class="card" style="height: 300px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <canvas id="alert-type-chart" width="100%" height="280"></canvas>
                                </div>
                                <p style="text-align: center; margin-top: 10px; font-weight: 500;">告警类型分布</p>
                            </div>
                            <div style="flex: 1; margin-left: 10px;">
                                <div class="card" style="height: 300px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                    <canvas id="alert-trend-chart" width="100%" height="280"></canvas>
                                </div>
                                <p style="text-align: center; margin-top: 10px; font-weight: 500;">告警趋势分析</p>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px; height: 350px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                            <canvas id="heatmap-chart" width="100%" height="330"></canvas>
                        </div>
                        <p style="text-align: center; margin-top: -15px; margin-bottom: 20px; font-weight: 500;">告警热力图</p>
                        
                        <div class="card">
                            <h3 style="margin-bottom: 15px;">高频问题区域</h3>
                            <table class="table" id="hotspot-table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>区域</th>
                                        <th>告警次数</th>
                                        <th>环比变化</th>
                                        <th>主要问题</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加记录模态框 -->
    <div id="add-record-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-plus"></i> 添加安防记录</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="record-form">
                    <div class="form-group">
                        <label>记录类型</label>
                        <select id="record-type" class="form-control" required>
                            <option value="">-- 请选择类型 --</option>
                            <option value="access">门禁记录</option>
                            <option value="camera">监控记录</option>
                            <option value="patrol">巡逻记录</option>
                            <option value="fire">消防检查</option>
                            <option value="equipment">设备维护</option>
                            <option value="other">其他记录</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>位置</label>
                        <select id="record-location" class="form-control" required>
                            <option value="">-- 请选择位置 --</option>
                            <option value="east">东门入口</option>
                            <option value="west">西门入口</option>
                            <option value="north">北门入口</option>
                            <option value="south">南门入口</option>
                            <option value="parking-a">地下停车场A区</option>
                            <option value="parking-b">地下停车场B区</option>
                            <option value="garden">社区花园</option>
                            <option value="playground">儿童游乐区</option>
                            <option value="other">其他区域</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>相关人员</label>
                        <select id="record-person" class="form-control" required>
                            <option value="">-- 请选择人员 --</option>
                            <option value="resident-1">张三(住户)</option>
                            <option value="resident-2">李四(住户)</option>
                            <option value="visitor-1">王五(访客)</option>
                            <option value="security-1">赵六(保安)</option>
                            <option value="security-2">钱七(保安)</option>
                            <option value="staff-1">周八(物业)</option>
                            <option value="unknown">未知人员</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>时间</label>
                        <input type="text" id="record-time" class="form-control" placeholder="选择时间" required>
                    </div>
                    <div class="form-group">
                        <label>状态</label>
                        <select id="record-status" class="form-control" required>
                            <option value="normal">正常</option>
                            <option value="suspicious">可疑</option>
                            <option value="alert">警报</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <textarea id="record-note" class="form-control" rows="3" placeholder="请输入详细记录信息..."></textarea>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn btn-outline close-modal">取消</button>
                        <button type="submit" class="btn btn-primary">保存记录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 查看记录详情模态框 -->
    <div id="view-record-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-eye"></i> 安防记录详情</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <div class="detail-card">
                    <div class="detail-row">
                        <div class="detail-label">记录ID:</div>
                        <div class="detail-value" id="view-record-id"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">类型:</div>
                        <div class="detail-value" id="view-record-type"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">位置:</div>
                        <div class="detail-value" id="view-record-location"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">时间:</div>
                        <div class="detail-value" id="view-record-time"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">相关人员:</div>
                        <div class="detail-value" id="view-record-person"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">状态:</div>
                        <div class="detail-value" id="view-record-status"></div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">备注:</div>
                        <div class="detail-value" id="view-record-note"></div>
                    </div>
                </div>
                <div style="text-align: right; margin-top: 20px;">
                    <button type="button" class="btn btn-outline close-modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 告警设置模态框 -->
    <div id="alert-settings-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-cog"></i> 告警设置</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="alert-settings-form">
                    <div class="form-group">
                        <label>告警通知方式</label>
                        <div>
                            <label style="display: block;">
                                <input type="checkbox" name="notify-method" value="sound" checked> 声音提醒
                            </label>
                            <label style="display: block;">
                                <input type="checkbox" name="notify-method" value="popup" checked> 弹窗提醒
                            </label>
                            <label style="display: block;">
                                <input type="checkbox" name="notify-method" value="email"> 邮件通知
                            </label>
                            <label style="display: block;">
                                <input type="checkbox" name="notify-method" value="sms"> 短信通知
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>紧急告警通知人员</label>
                        <select id="emergency-contacts" class="form-control" multiple>
                            <option value="security-team">保安团队</option>
                            <option value="property-manager">物业经理</option>
                            <option value="community-leader">社区负责人</option>
                            <option value="police">辖区民警</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>告警音量</label>
                        <input type="range" id="alert-volume" min="0" max="100" value="70" class="form-control">
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn btn-outline close-modal">取消</button>
                        <button type="submit" class="btn btn-primary">保存设置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 分配告警模态框 -->
    <div id="assign-alert-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-user-shield"></i> 分配告警</h3>
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="assign-alert-form">
                    <div class="form-group">
                        <label>告警ID</label>
                        <input type="text" id="assign-alert-id" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label>分配给</label>
                        <select id="assign-to" class="form-control" required>
                            <option value="">-- 请选择保安人员 --</option>
                            <option value="security-1">赵六 (保安队长)</option>
                            <option value="security-2">钱七 (巡逻保安)</option>
                            <option value="security-3">孙八 (夜班保安)</option>
                            <option value="security-4">李九 (门岗保安)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>优先级</label>
                        <select id="assign-priority" class="form-control" required>
                            <option value="high">高</option>
                            <option value="medium" selected>中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>处理说明</label>
                        <textarea id="assign-note" class="form-control" rows="3" placeholder="请输入处理要求和说明..."></textarea>
                    </div>
                    <div style="text-align: right;">
                        <button type="button" class="btn btn-outline close-modal">取消</button>
                        <button type="submit" class="btn btn-primary">确认分配</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script>
        // 模拟数据
        const securityRecords = [
            { 
                id: 'SEC20230001', 
                type: '门禁', 
                location: '东门入口', 
                time: '2023-06-15 08:23:45', 
                person: '张三(住户)', 
                status: 'normal',
                note: '住户正常刷卡进入'
            },
            { 
                id: 'SEC20230002', 
                type: '监控', 
                location: '地下停车场B区', 
                time: '2023-06-15 12:45:30', 
                person: '未知人员', 
                status: 'suspicious',
                note: '发现不明人员在停车场徘徊'
            },
            { 
                id: 'SEC20230003', 
                type: '巡逻', 
                location: '社区花园', 
                time: '2023-06-15 15:10:22', 
                person: '李四(保安)', 
                status: 'normal',
                note: '例行巡逻，未发现异常'
            },
            { 
                id: 'SEC20230004', 
                type: '门禁', 
                location: '西门入口', 
                time: '2023-06-15 18:30:15', 
                person: '王五(访客)', 
                status: 'normal',
                note: '访客登记后进入'
            },
            { 
                id: 'SEC20230005', 
                type: '消防检查', 
                location: '2号楼', 
                time: '2023-06-14 09:15:00', 
                person: '周八(物业)', 
                status: 'normal',
                note: '月度消防设备检查，一切正常'
            },
            { 
                id: 'SEC20230006', 
                type: '设备维护', 
                location: '社区监控室', 
                time: '2023-06-13 14:30:00', 
                person: '技术员', 
                status: 'normal',
                note: '监控系统定期维护'
            }
        ];

        const alerts = [
            { 
                id: 'ALERT20230012', 
                type: '非法入侵', 
                location: '地下停车场A区', 
                time: '2023-06-15 02:30:15', 
                level: 'emergency', 
                status: 'pending', 
                note: '监控发现不明人员闯入停车场',
                history: []
            },
            { 
                id: 'ALERT20230011', 
                type: '门禁破坏', 
                location: '西门出口', 
                time: '2023-06-14 23:45:30', 
                level: 'emergency', 
                status: 'pending', 
                note: '门禁系统被外力破坏',
                history: []
            },
            { 
                id: 'ALERT20230010', 
                type: '可疑徘徊', 
                location: '3号楼前', 
                time: '2023-06-14 21:20:45', 
                level: 'high', 
                status: 'processing', 
                note: '同一人员在楼前徘徊超过30分钟',
                history: [
                    {
                        time: '2023-06-14 21:30:00',
                        action: '保安赵六已前往查看',
                        operator: '系统自动分配'
                    }
                ]
            },
            { 
                id: 'ALERT20230009', 
                type: '消防警报', 
                location: '2号楼5层', 
                time: '2023-06-14 18:05:10', 
                level: 'emergency', 
                status: 'resolved', 
                note: '烟雾传感器误报，已检查确认无火情',
                history: [
                    {
                        time: '2023-06-14 18:07:00',
                        action: '保安钱七已前往查看',
                        operator: '系统自动分配'
                    },
                    {
                        time: '2023-06-14 18:20:00',
                        action: '确认是烟雾传感器误报，已重置系统',
                        operator: '钱七'
                    },
                    {
                        time: '2023-06-14 18:25:00',
                        action: '标记为已解决',
                        operator: '管理员'
                    }
                ]
            }
        ];

        // 图表数据
        const alertTypeData = {
            labels: ['非法入侵', '门禁破坏', '可疑徘徊', '消防警报', '车辆刮擦', '电梯故障', '其他'],
            datasets: [{
                data: [12, 8, 15, 5, 7, 6, 3],
                backgroundColor: [
                    '#e74c3c', '#f39c12', '#f1c40f', '#3498db', '#2ecc71', '#9b59b6', '#95a5a6'
                ]
            }]
        };

        const alertTrendData = {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '告警数量',
                data: [25, 20, 22, 18, 15, 12],
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                fill: true,
                tension: 0.4
            }]
        };

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化Select2
            $('.form-control[multiple]').select2();
            
            // 初始化日期时间选择器
            flatpickr("#record-time", {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
                time_24hr: true,
                defaultDate: new Date()
            });
            
            flatpickr("#filter-date-range", {
                mode: "range",
                dateFormat: "Y-m-d",
                defaultDate: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()]
            });
            
            flatpickr("#start-date, #end-date", {
                dateFormat: "Y-m-d"
            });
            
            // 加载安防记录
            loadSecurityRecords();
            
            // 加载告警数据
            loadAlerts();
            updateAlertStats();
            
            // 加载统计分析数据
            loadAnalysisData();
            initCharts();
            
            // 侧边栏菜单切换
            const sidebarLinks = document.querySelectorAll('.sidebar-menu a');
            sidebarLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active类
                    sidebarLinks.forEach(l => l.classList.remove('active'));
                    // 添加当前active类
                    this.classList.add('active');
                    
                    // 隐藏所有内容区域
                    document.querySelectorAll('.content .card').forEach(card => {
                        card.style.display = 'none';
                    });
                    
                    // 显示对应的内容区域
                    const targetId = this.getAttribute('href');
                    document.querySelector(targetId).style.display = 'block';
                });
            });
            
            // 安防记录选项卡切换
            const recordTabs = document.querySelectorAll('#security-list .tab');
            recordTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 找到父元素中的所有tab
                    const parentTabs = this.parentElement.querySelectorAll('.tab');
                    parentTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 筛选记录
                    const tabType = this.getAttribute('data-tab');
                    filterSecurityRecords(tabType);
                });
            });
            
            // 告警管理选项卡切换
            const alertTabs = document.querySelectorAll('#security-alert .tab');
            alertTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 找到父元素中的所有tab
                    const parentTabs = this.parentElement.querySelectorAll('.tab');
                    parentTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 筛选告警
                    const tabType = this.getAttribute('data-alert-tab');
                    filterAlerts(tabType);
                });
            });
            
            // 添加记录按钮
            document.getElementById('add-record-btn').addEventListener('click', function() {
                document.getElementById('add-record-modal').style.display = 'block';
            });
            
            // 筛选记录按钮
            document.getElementById('filter-records-btn').addEventListener('click', function() {
                const filterForm = document.getElementById('filter-form');
                filterForm.style.display = filterForm.style.display === 'none' ? 'block' : 'none';
            });
            
            // 应用筛选按钮
            document.getElementById('apply-filter-btn').addEventListener('click', function() {
                const typeFilter = $('#filter-type').val() || [];
                const statusFilter = $('#filter-status').val() || [];
                const locationFilter = $('#filter-location').val() || [];
                const dateRange = $('#filter-date-range').val();
                
                // 在实际项目中，这里会发送请求到服务器进行筛选
                // 这里我们只是模拟筛选效果
                alert(`应用筛选条件:\n类型: ${typeFilter.join(', ')}\n状态: ${statusFilter.join(', ')}\n位置: ${locationFilter.join(', ')}\n时间范围: ${dateRange}`);
                
                document.getElementById('filter-form').style.display = 'none';
            });
            
            // 重置筛选按钮
            document.getElementById('reset-filter-btn').addEventListener('click', function() {
                $('#filter-type').val(null).trigger('change');
                $('#filter-status').val(null).trigger('change');
                $('#filter-location').val(null).trigger('change');
                $('#filter-date-range').val('');
            });
            
            // 静音所有告警按钮
            document.getElementById('mute-all-btn').addEventListener('click', function() {
                alert('所有告警已静音');
            });
            
            // 告警设置按钮
            document.getElementById('alert-settings-btn').addEventListener('click', function() {
                document.getElementById('alert-settings-modal').style.display = 'block';
            });
            
            // 导出数据按钮
            document.getElementById('export-data-btn').addEventListener('click', function() {
                const timeRange = document.getElementById('time-range-select').value;
                let exportData = '';
                
                if(timeRange === '7') {
                    exportData = '导出最近7天的数据';
                } else if(timeRange === '30') {
                    exportData = '导出最近30天的数据';
                } else if(timeRange === '90') {
                    exportData = '导出最近90天的数据';
                } else {
                    exportData = '导出自定义时间范围的数据';
                }
                
                // 模拟导出功能
                alert(exportData + '\n(实际项目中会生成Excel/PDF文件)');
            });
            
            // 时间范围选择
            document.getElementById('time-range-select').addEventListener('change', function() {
                if(this.value === 'custom') {
                    document.getElementById('custom-date-range').style.display = 'block';
                } else {
                    document.getElementById('custom-date-range').style.display = 'none';
                    loadAnalysisData();
                }
            });
            
            // 应用自定义时间范围
            document.getElementById('apply-custom-date').addEventListener('click', function() {
                const startDate = document.getElementById('start-date').value;
                const endDate = document.getElementById('end-date').value;
                
                if(!startDate || !endDate) {
                    alert('请选择开始和结束时间');
                    return;
                }
                
                alert(`应用自定义时间范围: ${startDate} 至 ${endDate}`);
                document.getElementById('custom-date-range').style.display = 'none';
                loadAnalysisData();
            });
            
            // 取消自定义时间范围
            document.getElementById('cancel-custom-date').addEventListener('click', function() {
                document.getElementById('time-range-select').value = '7';
                document.getElementById('custom-date-range').style.display = 'none';
            });
            
            // 关闭模态框
            document.querySelectorAll('.close-modal').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.modal').style.display = 'none';
                });
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if(e.target.classList.contains('modal')) {
                    e.target.style.display = 'none';
                }
            });
            
            // 保存记录表单
            document.getElementById('record-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const type = document.getElementById('record-type').value;
                const location = document.getElementById('record-location').value;
                const person = document.getElementById('record-person').value;
                const time = document.getElementById('record-time').value;
                const status = document.getElementById('record-status').value;
                const note = document.getElementById('record-note').value;
                
                // 在实际项目中，这里会发送数据到服务器保存
                // 这里我们只是模拟保存效果
                const newRecord = {
                    id: 'SEC' + (20230000 + securityRecords.length + 1),
                    type: document.getElementById('record-type').options[document.getElementById('record-type').selectedIndex].text,
                    location: document.getElementById('record-location').options[document.getElementById('record-location').selectedIndex].text,
                    person: document.getElementById('record-person').options[document.getElementById('record-person').selectedIndex].text,
                    time: time,
                    status: status,
                    note: note
                };
                
                securityRecords.unshift(newRecord);
                loadSecurityRecords();
                
                alert('记录已保存');
                document.getElementById('add-record-modal').style.display = 'none';
                this.reset();
            });
            
            // 保存告警设置
            document.getElementById('alert-settings-form').addEventListener('submit', function(e) {
                e.preventDefault();
                alert('告警设置已保存');
                document.getElementById('alert-settings-modal').style.display = 'none';
            });
            
            // 分页按钮
            document.getElementById('prev-page').addEventListener('click', function() {
                alert('上一页');
            });
            
            document.getElementById('next-page').addEventListener('click', function() {
                alert('下一页');
            });
            
            // 分配告警表单
            document.getElementById('assign-alert-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const alertId = document.getElementById('assign-alert-id').value;
                const assignTo = document.getElementById('assign-to').value;
                const priority = document.getElementById('assign-priority').value;
                const note = document.getElementById('assign-note').value;
                
                // 在实际项目中，这里会发送数据到服务器保存
                // 这里我们只是模拟保存效果
                const alert = alerts.find(a => a.id === alertId);
                if(alert) {
                    alert.history.push({
                        time: new Date().toISOString().replace('T', ' ').substring(0, 19),
                        action: `已分配给 ${document.getElementById('assign-to').options[document.getElementById('assign-to').selectedIndex].text} (优先级: ${priority})`,
                        operator: '管理员'
                    });
                    alert.status = 'processing';
                    
                    loadAlerts();
                    updateAlertStats();
                }
                
                alert('告警已分配');
                document.getElementById('assign-alert-modal').style.display = 'none';
                this.reset();
            });
        });
        
        // 加载安防记录
        function loadSecurityRecords() {
            const tbody = document.querySelector('#security-records-table tbody');
            tbody.innerHTML = '';
            
            securityRecords.forEach(record => {
                const tr = document.createElement('tr');
                
                // 根据状态设置badge
                let statusBadge = '';
                if(record.status === 'normal') {
                    statusBadge = '<span class="badge badge-success">正常</span>';
                } else if(record.status === 'suspicious') {
                    statusBadge = '<span class="badge badge-warning">可疑</span>';
                } else if(record.status === 'alert') {
                    statusBadge = '<span class="badge badge-danger">警报</span>';
                }
                
                // 根据状态设置操作按钮
                let actionBtns = '';
                if(record.status === 'alert') {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-record" data-id="${record.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-danger handle-alert" data-id="${record.id}"><i class="fas fa-bell"></i> 处理</button>
                    `;
                } else {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-record" data-id="${record.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-outline edit-record" data-id="${record.id}"><i class="fas fa-edit"></i> 编辑</button>
                    `;
                }
                
                tr.innerHTML = `
                    <td>${record.id}</td>
                    <td>${record.type}</td>
                    <td>${record.location}</td>
                    <td>${record.time}</td>
                    <td>${record.person}</td>
                    <td>${statusBadge}</td>
                    <td class="actions">${actionBtns}</td>
                `;
                
                tbody.appendChild(tr);
            });
            
            // 添加查看和编辑按钮事件
            document.querySelectorAll('.view-record').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    viewRecordDetails(recordId);
                });
            });
            
            document.querySelectorAll('.edit-record').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    editRecord(recordId);
                });
            });
            
            document.querySelectorAll('.handle-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    handleAlert(recordId);
                });
            });
        }
        
        // 筛选安防记录
        function filterSecurityRecords(type) {
            if(type === 'all') {
                loadSecurityRecords();
                return;
            }
            
            const filteredRecords = securityRecords.filter(record => {
                if(type === 'access') return record.type === '门禁';
                if(type === 'camera') return record.type === '监控';
                if(type === 'patrol') return record.type === '巡逻';
                if(type === 'fire') return record.type === '消防检查';
                if(type === 'equipment') return record.type === '设备维护';
                return true;
            });
            
            const tbody = document.querySelector('#security-records-table tbody');
            tbody.innerHTML = '';
            
            filteredRecords.forEach(record => {
                const tr = document.createElement('tr');
                
                let statusBadge = '';
                if(record.status === 'normal') {
                    statusBadge = '<span class="badge badge-success">正常</span>';
                } else if(record.status === 'suspicious') {
                    statusBadge = '<span class="badge badge-warning">可疑</span>';
                } else if(record.status === 'alert') {
                    statusBadge = '<span class="badge badge-danger">警报</span>';
                }
                
                let actionBtns = '';
                if(record.status === 'alert') {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-record" data-id="${record.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-danger handle-alert" data-id="${record.id}"><i class="fas fa-bell"></i> 处理</button>
                    `;
                } else {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-record" data-id="${record.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-outline edit-record" data-id="${record.id}"><i class="fas fa-edit"></i> 编辑</button>
                    `;
                }
                
                tr.innerHTML = `
                    <td>${record.id}</td>
                    <td>${record.type}</td>
                    <td>${record.location}</td>
                    <td>${record.time}</td>
                    <td>${record.person}</td>
                    <td>${statusBadge}</td>
                    <td class="actions">${actionBtns}</td>
                `;
                
                tbody.appendChild(tr);
            });
            
            // 重新绑定事件
            document.querySelectorAll('.view-record').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    viewRecordDetails(recordId);
                });
            });
            
            document.querySelectorAll('.edit-record').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    editRecord(recordId);
                });
            });
            
            document.querySelectorAll('.handle-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    handleAlert(recordId);
                });
            });
        }
        
        // 查看记录详情
        function viewRecordDetails(recordId) {
            const record = securityRecords.find(r => r.id === recordId);
            if(record) {
                document.getElementById('view-record-id').textContent = record.id;
                document.getElementById('view-record-type').textContent = record.type;
                document.getElementById('view-record-location').textContent = record.location;
                document.getElementById('view-record-time').textContent = record.time;
                document.getElementById('view-record-person').textContent = record.person;
                
                let statusText = '';
                if(record.status === 'normal') {
                    statusText = '<span class="badge badge-success">正常</span>';
                } else if(record.status === 'suspicious') {
                    statusText = '<span class="badge badge-warning">可疑</span>';
                } else if(record.status === 'alert') {
                    statusText = '<span class="badge badge-danger">警报</span>';
                }
                document.getElementById('view-record-status').innerHTML = statusText;
                
                document.getElementById('view-record-note').textContent = record.note || '无';
                
                document.getElementById('view-record-modal').style.display = 'block';
            }
        }
        
        // 编辑记录
        function editRecord(recordId) {
            const record = securityRecords.find(r => r.id === recordId);
            if(record) {
                // 在实际项目中，这里会打开编辑表单并填充数据
                alert(`编辑记录: ${record.id}\n在实际项目中会打开编辑表单`);
            }
        }
        
        // 处理警报
        function handleAlert(recordId) {
            const record = securityRecords.find(r => r.id === recordId);
            if(record) {
                // 在实际项目中，这里会打开处理表单
                alert(`处理警报: ${record.id}\n位置: ${record.location}\n相关人员: ${record.person}`);
            }
        }
        
        // 加载告警数据
        function loadAlerts() {
            const tbody = document.querySelector('#alerts-table tbody');
            tbody.innerHTML = '';
            
            alerts.forEach(alert => {
                const tr = document.createElement('tr');
                
                // 根据级别设置badge
                let levelBadge = '';
                if(alert.level === 'emergency') {
                    levelBadge = '<span class="badge badge-danger">紧急</span>';
                } else if(alert.level === 'high') {
                    levelBadge = '<span class="badge badge-warning">高</span>';
                } else if(alert.level === 'medium') {
                    levelBadge = '<span class="badge badge-primary">中</span>';
                } else {
                    levelBadge = '<span class="badge badge-success">低</span>';
                }
                
                // 根据状态设置badge
                let statusBadge = '';
                if(alert.status === 'pending') {
                    statusBadge = '<span class="badge badge-danger">未处理</span>';
                } else if(alert.status === 'processing') {
                    statusBadge = '<span class="badge badge-warning">处理中</span>';
                } else if(alert.status === 'resolved') {
                    statusBadge = '<span class="badge badge-success">已解决</span>';
                }
                
                // 根据状态设置操作按钮
                let actionBtns = '';
                if(alert.status === 'pending') {
                    actionBtns = `
                        <button class="btn btn-sm btn-danger process-alert" data-id="${alert.id}"><i class="fas fa-bell"></i> 处理</button>
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                    `;
                } else if(alert.status === 'processing') {
                    actionBtns = `
                        <button class="btn btn-sm btn-warning assign-alert" data-id="${alert.id}"><i class="fas fa-user-shield"></i> 派员</button>
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                    `;
                } else {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-outline view-report" data-id="${alert.id}"><i class="fas fa-file-alt"></i> 报告</button>
                    `;
                }
                
                tr.innerHTML = `
                    <td>${alert.id}</td>
                    <td>${alert.type}</td>
                    <td>${alert.location}</td>
                    <td>${alert.time}</td>
                    <td>${levelBadge}</td>
                    <td>${statusBadge}</td>
                    <td class="actions">${actionBtns}</td>
                `;
                
                tbody.appendChild(tr);
            });
            
            // 添加按钮事件
            document.querySelectorAll('.process-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    showAlertDetails(alertId);
                });
            });
            
            document.querySelectorAll('.assign-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    assignAlert(alertId);
                });
            });
            
            document.querySelectorAll('.view-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    viewAlertDetails(alertId);
                });
            });
            
            document.querySelectorAll('.view-report').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    viewAlertReport(alertId);
                });
            });
        }
        
        // 筛选告警
        function filterAlerts(status) {
            if(status === 'all') {
                loadAlerts();
                return;
            }
            
            const filteredAlerts = alerts.filter(alert => alert.status === status);
            
            const tbody = document.querySelector('#alerts-table tbody');
            tbody.innerHTML = '';
            
            filteredAlerts.forEach(alert => {
                const tr = document.createElement('tr');
                
                let levelBadge = '';
                if(alert.level === 'emergency') {
                    levelBadge = '<span class="badge badge-danger">紧急</span>';
                } else if(alert.level === 'high') {
                    levelBadge = '<span class="badge badge-warning">高</span>';
                } else if(alert.level === 'medium') {
                    levelBadge = '<span class="badge badge-primary">中</span>';
                } else {
                    levelBadge = '<span class="badge badge-success">低</span>';
                }
                
                let statusBadge = '';
                if(alert.status === 'pending') {
                    statusBadge = '<span class="badge badge-danger">未处理</span>';
                } else if(alert.status === 'processing') {
                    statusBadge = '<span class="badge badge-warning">处理中</span>';
                } else if(alert.status === 'resolved') {
                    statusBadge = '<span class="badge badge-success">已解决</span>';
                }
                
                let actionBtns = '';
                if(alert.status === 'pending') {
                    actionBtns = `
                        <button class="btn btn-sm btn-danger process-alert" data-id="${alert.id}"><i class="fas fa-bell"></i> 处理</button>
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                    `;
                } else if(alert.status === 'processing') {
                    actionBtns = `
                        <button class="btn btn-sm btn-warning assign-alert" data-id="${alert.id}"><i class="fas fa-user-shield"></i> 派员</button>
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                    `;
                } else {
                    actionBtns = `
                        <button class="btn btn-sm btn-outline view-alert" data-id="${alert.id}"><i class="fas fa-eye"></i> 查看</button>
                        <button class="btn btn-sm btn-outline view-report" data-id="${alert.id}"><i class="fas fa-file-alt"></i> 报告</button>
                    `;
                }
                
                tr.innerHTML = `
                    <td>${alert.id}</td>
                    <td>${alert.type}</td>
                    <td>${alert.location}</td>
                    <td>${alert.time}</td>
                    <td>${levelBadge}</td>
                    <td>${statusBadge}</td>
                    <td class="actions">${actionBtns}</td>
                `;
                
                tbody.appendChild(tr);
            });
            
            // 重新绑定事件
            document.querySelectorAll('.process-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    showAlertDetails(alertId);
                });
            });
            
            document.querySelectorAll('.assign-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    assignAlert(alertId);
                });
            });
            
            document.querySelectorAll('.view-alert').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    viewAlertDetails(alertId);
                });
            });
            
            document.querySelectorAll('.view-report').forEach(btn => {
                btn.addEventListener('click', function() {
                    const alertId = this.getAttribute('data-id');
                    viewAlertReport(alertId);
                });
            });
        }
        
        // 更新告警统计
        function updateAlertStats() {
            const pendingCount = alerts.filter(a => a.status === 'pending').length;
            const processingCount = alerts.filter(a => a.status === 'processing').length;
            const resolvedCount = alerts.filter(a => a.status === 'resolved').length;
            const resolutionRate = Math.round((resolvedCount / (pendingCount + processingCount + resolvedCount)) * 100);
            
            document.getElementById('alert-stats').innerHTML = `
                <div class="stat-card">
                    <div class="stat-icon danger">
                        <i class="fas fa-exclamation"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${pendingCount}</h3>
                        <p>未处理告警</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon warning">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${processingCount}</h3>
                        <p>处理中告警</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon success">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${resolvedCount}</h3>
                        <p>已解决告警</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon primary">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-info">
                        <h3>${resolutionRate}%</h3>
                        <p>解决率</p>
                    </div>
                </div>
            `;
        }
        
        // 显示告警详情
        function showAlertDetails(alertId) {
            const alert = alerts.find(a => a.id === alertId);
            if(alert) {
                document.getElementById('alert-id').textContent = alert.id;
                document.getElementById('alert-type').textContent = alert.type;
                document.getElementById('alert-location').textContent = alert.location;
                document.getElementById('alert-time').textContent = alert.time;
                
                let levelText = '';
                if(alert.level === 'emergency') {
                    levelText = '<span class="badge badge-danger">紧急</span>';
                } else if(alert.level === 'high') {
                    levelText = '<span class="badge badge-warning">高</span>';
                } else if(alert.level === 'medium') {
                    levelText = '<span class="badge badge-primary">中</span>';
                } else {
                    levelText = '<span class="badge badge-success">低</span>';
                }
                document.getElementById('alert-level').innerHTML = levelText;
                
                let statusText = '';
                if(alert.status === 'pending') {
                    statusText = '<span class="badge badge-danger">未处理</span>';
                } else if(alert.status === 'processing') {
                    statusText = '<span class="badge badge-warning">处理中</span>';
                } else if(alert.status === 'resolved') {
                    statusText = '<span class="badge badge-success">已解决</span>';
                }
                document.getElementById('alert-status').innerHTML = statusText;
                
                document.getElementById('alert-description').textContent = alert.note;
                
                // 加载处理历史
                const historyContainer = document.getElementById('alert-history');
                historyContainer.innerHTML = '';
                
                if(alert.history && alert.history.length > 0) {
                    alert.history.forEach(item => {
                        const historyItem = document.createElement('div');
                        historyItem.className = 'history-item';
                        historyItem.innerHTML = `
                            <div class="history-header">
                                <strong>${item.operator}</strong>
                                <span class="history-time">${item.time}</span>
                            </div>
                            <div class="history-content">${item.action}</div>
                        `;
                        historyContainer.appendChild(historyItem);
                    });
                } else {
                    historyContainer.innerHTML = '<p style="color: #777;">暂无处理历史</p>';
                }
                
                document.getElementById('alert-process-note').value = '';
                document.getElementById('alert-details').style.display = 'block';
                
                // 滚动到详情区域
                document.getElementById('alert-details').scrollIntoView({ behavior: 'smooth' });
                
                // 保存处理记录按钮
                document.getElementById('save-process-btn').onclick = function() {
                    const note = document.getElementById('alert-process-note').value;
                    if(note.trim() === '') {
                        alert('请输入处理记录');
                        return;
                    }
                    
                    // 在实际项目中，这里会发送数据到服务器保存
                    alert.history.push({
                        time: new Date().toISOString().replace('T', ' ').substring(0, 19),
                        action: note,
                        operator: '管理员'
                    });
                    
                    loadAlerts();
                    updateAlertStats();
                    
                    alert('处理记录已保存');
                    document.getElementById('alert-process-note').value = '';
                };
                
                // 标记为已解决按钮
                document.getElementById('resolve-alert-btn').onclick = function() {
                    // 在实际项目中，这里会发送请求到服务器更新状态
                    alert.status = 'resolved';
                    alert.history.push({
                        time: new Date().toISOString().replace('T', ' ').substring(0, 19),
                        action: '标记为已解决',
                        operator: '管理员'
                    });
                    
                    loadAlerts();
                    updateAlertStats();
                    
                    alert('告警已标记为已解决');
                    document.getElementById('alert-details').style.display = 'none';
                };
                
                // 取消按钮
                document.getElementById('cancel-process-btn').onclick = function() {
                    document.getElementById('alert-details').style.display = 'none';
                };
            }
        }
        
        // 分配告警
        function assignAlert(alertId) {
            const alert = alerts.find(a => a.id === alertId);
            if(alert) {
                document.getElementById('assign-alert-id').value = alert.id;
                document.getElementById('assign-alert-modal').style.display = 'block';
            }
        }
        
        // 查看告警详情
        function viewAlertDetails(alertId) {
            const alert = alerts.find(a => a.id === alertId);
            if(alert) {
                // 在实际项目中，这里会打开详情页面
                alert(`告警ID: ${alert.id}\n类型: ${alert.type}\n位置: ${alert.location}\n时间: ${alert.time}\n描述: ${alert.note}`);
            }
        }
        
        // 查看告警报告
        function viewAlertReport(alertId) {
            const alert = alerts.find(a => a.id === alertId);
            if(alert) {
                // 在实际项目中，这里会打开报告页面
                alert(`查看告警 ${alert.id} 的详细报告`);
            }
        }
        
        // 统计分析数据
const analysisStatsData = {
    // 不同时间范围的数据
    timeRanges: {
        '7': {
            accessRecords: 245,
            cameraAlerts: 28,
            securityAlerts: 15,
            satisfactionRate: 92,
            hotspots: [
                { rank: 1, location: '地下停车场A区', count: 12, trend: '↑15%', trendType: 'up', issues: '非法入侵, 车辆刮擦' },
                { rank: 2, location: '社区西门', count: 8, trend: '↓5%', trendType: 'down', issues: '门禁破坏, 尾随进入' },
                { rank: 3, location: '儿童游乐区', count: 6, trend: '↑20%', trendType: 'up', issues: '设施损坏, 可疑人员' },
                { rank: 4, location: '2号楼电梯', count: 5, trend: '↓10%', trendType: 'down', issues: '电梯故障, 骚扰行为' }
            ]
        },
        '30': {
            accessRecords: 1245,
            cameraAlerts: 128,
            securityAlerts: 75,
            satisfactionRate: 95,
            hotspots: [
                { rank: 1, location: '地下停车场A区', count: 42, trend: '↑12%', trendType: 'up', issues: '非法入侵, 车辆刮擦' },
                { rank: 2, location: '社区西门', count: 38, trend: '↓8%', trendType: 'down', issues: '门禁破坏, 尾随进入' },
                { rank: 3, location: '儿童游乐区', count: 26, trend: '↑25%', trendType: 'up', issues: '设施损坏, 可疑人员' },
                { rank: 4, location: '2号楼电梯', count: 22, trend: '↓15%', trendType: 'down', issues: '电梯故障, 骚扰行为' },
                { rank: 5, location: '健身区域', count: 18, trend: '↑5%', trendType: 'up', issues: '设备损坏' }
            ]
        },
        '90': {
            accessRecords: 3745,
            cameraAlerts: 328,
            securityAlerts: 195,
            satisfactionRate: 96,
            hotspots: [
                { rank: 1, location: '地下停车场A区', count: 112, trend: '↑10%', trendType: 'up', issues: '非法入侵, 车辆刮擦' },
                { rank: 2, location: '社区西门', count: 98, trend: '↓12%', trendType: 'down', issues: '门禁破坏, 尾随进入' },
                { rank: 3, location: '儿童游乐区', count: 76, trend: '↑18%', trendType: 'up', issues: '设施损坏, 可疑人员' },
                { rank: 4, location: '2号楼电梯', count: 65, trend: '↓5%', trendType: 'down', issues: '电梯故障, 骚扰行为' },
                { rank: 5, location: '健身区域', count: 48, trend: '↑8%', trendType: 'up', issues: '设备损坏' },
                { rank: 6, location: '3号楼前', count: 35, trend: '↑22%', trendType: 'up', issues: '可疑徘徊' }
            ]
        }
    },
    // 自定义时间范围数据 (模拟)
    custom: {
        accessRecords: 0,
        cameraAlerts: 0,
        securityAlerts: 0,
        satisfactionRate: 0,
        hotspots: []
    }
};

// 加载统计分析数据
function loadAnalysisData() {
    const timeRange = document.getElementById('time-range-select').value;
    let data;
    
    // 获取对应时间范围的数据
    if (timeRange === 'custom') {
        // 如果是自定义时间范围，需要计算数据
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        if (!startDate || !endDate) {
            alert('请先设置自定义时间范围');
            document.getElementById('time-range-select').value = '7';
            data = analysisStatsData.timeRanges['7'];
        } else {
            // 模拟根据自定义时间范围计算数据
            data = calculateCustomRangeData(startDate, endDate);
        }
    } else {
        data = analysisStatsData.timeRanges[timeRange];
    }
    
    // 更新统计卡片
    updateStatsCards(data);
    
    // 更新热点区域表格
    updateHotspotsTable(data.hotspots);
}

// 根据自定义时间范围计算数据 (模拟)
function calculateCustomRangeData(startDate, endDate) {
    // 在实际应用中，这里应该从服务器获取指定时间范围的数据
    // 这里我们只是模拟计算
    
    const start = new Date(startDate);
    const end = new Date(endDate);
    const diffDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
    
    // 根据天数模拟数据
    const data = JSON.parse(JSON.stringify(analysisStatsData.timeRanges['7'])); // 克隆7天数据作为基础
    
    // 调整数据量
    const factor = diffDays / 7;
    data.accessRecords = Math.round(data.accessRecords * factor);
    data.cameraAlerts = Math.round(data.cameraAlerts * factor);
    data.securityAlerts = Math.round(data.securityAlerts * factor);
    
    // 调整热点数据
    data.hotspots.forEach(hotspot => {
        hotspot.count = Math.round(hotspot.count * factor);
    });
    
    return data;
}

// 更新统计卡片
function updateStatsCards(data) {
    document.getElementById('analysis-stats').innerHTML = `
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="fas fa-door-open"></i>
            </div>
            <div class="stat-info">
                <h3>${data.accessRecords.toLocaleString()}</h3>
                <p>门禁记录</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="fas fa-video"></i>
            </div>
            <div class="stat-info">
                <h3>${data.cameraAlerts.toLocaleString()}</h3>
                <p>监控异常</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon danger">
                <i class="fas fa-bell"></i>
            </div>
            <div class="stat-info">
                <h3>${data.securityAlerts.toLocaleString()}</h3>
                <p>安全告警</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="fas fa-user-shield"></i>
            </div>
            <div class="stat-info">
                <h3>${data.satisfactionRate}%</h3>
                <p>安全满意度</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="stat-info">
                <h3>${calculateResolutionRate(data)}%</h3>
                <p>告警解决率</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-info">
                <h3>${calculateAvgResponseTime(data)}</h3>
                <p>平均响应时间</p>
            </div>
        </div>
    `;
}

// 计算解决率 (模拟)
function calculateResolutionRate(data) {
    // 在实际应用中，这应该从详细数据计算
    // 这里我们基于安全告警数量和满意度模拟
    const baseRate = data.satisfactionRate - 5;
    return Math.max(70, Math.min(99, baseRate + Math.floor(Math.random() * 10)));
}

// 计算平均响应时间 (模拟)
function calculateAvgResponseTime(data) {
    // 在实际应用中，这应该从处理记录计算
    // 这里我们基于告警数量模拟
    if (data.securityAlerts === 0) return '0分钟';
    
    const avgMinutes = Math.max(5, Math.min(120, 60 - Math.floor(data.securityAlerts / 10)));
    return `${avgMinutes}分钟`;
}

// 更新热点区域表格
function updateHotspotsTable(hotspots) {
    const tbody = document.querySelector('#hotspot-table tbody');
    tbody.innerHTML = '';
    
    if (hotspots.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="5" style="text-align: center; color: #777;">暂无热点区域数据</td>
            </tr>
        `;
        return;
    }
    
    hotspots.forEach(hotspot => {
        const trendColor = hotspot.trendType === 'up' ? 'var(--danger-color)' : 'var(--success-color)';
        const trendIcon = hotspot.trendType === 'up' ? '↑' : '↓';
        
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${hotspot.rank}</td>
            <td>${hotspot.location}</td>
            <td>${hotspot.count}</td>
            <td><span style="color: ${trendColor};">${trendIcon}${hotspot.trend.replace(trendIcon, '')}</span></td>
            <td>${hotspot.issues}</td>
        `;
        tbody.appendChild(tr);
    });
}

// 在DOMContentLoaded事件中初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化时间范围选择器
    document.getElementById('time-range-select').addEventListener('change', function() {
        if (this.value === 'custom') {
            document.getElementById('custom-date-range').style.display = 'block';
        } else {
            document.getElementById('custom-date-range').style.display = 'none';
            loadAnalysisData();
        }
    });
    
    // 应用自定义时间范围
    document.getElementById('apply-custom-date').addEventListener('click', function() {
        loadAnalysisData();
    });
    
    // 初始加载数据
    loadAnalysisData();
});
        
        // 初始化图表
        function initCharts() {
            // 告警类型分布图
            const alertTypeCtx = document.getElementById('alert-type-chart').getContext('2d');
            new Chart(alertTypeCtx, {
                type: 'doughnut',
                data: alertTypeData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        },
                        title: {
                            display: true,
                            text: '告警类型分布',
                            position: 'top'
                        }
                    }
                }
            });
            
            // 告警趋势图
            const alertTrendCtx = document.getElementById('alert-trend-chart').getContext('2d');
            new Chart(alertTrendCtx, {
                type: 'line',
                data: alertTrendData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: '告警趋势分析',
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '告警数量'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '月份'
                            }
                        }
                    }
                }
            });
            
            // 热力图 (简化版)
            const heatmapCtx = document.getElementById('heatmap-chart').getContext('2d');
            new Chart(heatmapCtx, {
                type: 'bar',
                data: {
                    labels: ['停车场A区', '社区西门', '儿童游乐区', '2号楼电梯', '健身区域', '3号楼前'],
                    datasets: [{
                        label: '告警次数',
                        data: [12, 8, 6, 5, 4, 3],
                        backgroundColor: [
                            'rgba(231, 76, 60, 0.7)',
                            'rgba(243, 156, 18, 0.7)',
                            'rgba(241, 196, 15, 0.7)',
                            'rgba(52, 152, 219, 0.7)',
                            'rgba(46, 204, 113, 0.7)',
                            'rgba(155, 89, 182, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: '告警热力图',
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '告警次数'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '区域'
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>